<template>
  <div class="app">
    <router-link to="/home">Home</router-link>
    |
    <router-link to="/about">About</router-link>
    <div>
      <p>to="/search?key=黑马程序员"用$route.query.key来获取，配置中用{ path: '/search', component: Search }来接收</p>
      <p>to="/search/黑马程序员"用$route.params.words来获取，配置中用{ path: '/search/:words', component: Search
        }来接收</p>
      <p>配置中用{ path: '/search/:words?', component: Search } 表示可以传一个参数，也可以不传，直接显示页面</p>
      <p>路由模式：注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则，默认路由模式是 hash 模式</p>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>// 可以在这里定义全局逻辑
</script>

<style scoped>.app {
  text-align: center;
  margin-top: 50px;
}
</style>